<template>
  <v-container>
    <v-overlay v-if="isSuccess">
      <v-sheet
        color="thirdary"
        class="primary--text rounded-lg overflow-hidden"
        elevation="4"
        ><v-sheet color="primary" class="pa-4 text-center text-h5"
          >注册成功</v-sheet
        >

        <div class="pa-16 fontblack--text text-h5">
          {{ countDown ? countDown.time : 0 }}秒后跳转到<span
            class="primary--text"
            >{{ radioGroup ? "医生" : "用户" }}</span
          >资料填写页面
        </div>
        <div
          class="pt-5 pb-16 primary--text text-center hover-underline cur-point"
          @click="gotoHome"
        >
          选择跳过,返回首页
        </div>
      </v-sheet>
    </v-overlay>

    <v-alert
      :value="alert"
      transition="scale-transition"
      rounded="lg"
      type="error"
      >该用户名已存在</v-alert
    >
    <v-sheet color="thirdary" class="py-16 d-flex flex-column align-center">
      <div class="d-flex justify-center align-center">
        <span class="text-h4 primary--text">用户注册</span>
      </div>
      <v-sheet color="thirdary" width="80%" class="mt-10">
        <v-form ref="form" v-model="valid">
          <v-text-field
            label="用户名"
            v-model="userName"
            :rules="userNameRules"
            :loading="userNameLoad"
            hint="长度为8到16个字符，首位只能为字母,包含字符、数字和下划线，不得包含特殊字符"
            required
            :counter="16"
            clearable
            autocomplete="off"
            validate-on-blur
          >
          </v-text-field>

          <v-text-field
            label="密码"
            v-model="password"
            type="password"
            :rules="passwordRulse"
            hint="长度为8到16个字符,包括至少一位字母"
            required
            autocomplete="off"
            validate-on-blur
          ></v-text-field>
          <v-text-field
            label="确认密码"
            v-model="passwordEnter"
            :rules="passwordEnterValid"
            type="password"
            hint="长度为8到16个字符,包括至少一位字母"
            required
            autocomplete="off"
            validate-on-blur
          ></v-text-field>
          <v-radio-group row v-model="radioGroup">
            <v-radio label="我是用户"></v-radio>
            <v-radio label="我是医生"></v-radio>
          </v-radio-group>
          <v-btn
            color="primary"
            width="100%"
            class="mt-10"
            :disabled="!valid"
            @click="submit"
            >提交</v-btn
          >
        </v-form>
      </v-sheet>
    </v-sheet>
  </v-container>
</template>



<script>
import { CountDown } from "../untill/time.js";
import { login } from "../components//network";
import { userNameRules, passwordRulse } from "../untill/formValid.js";
export default {
  data() {
    return {
      countDown: new CountDown(),
      valid: "",
      alert: false,
      radioGroup: 0,
      isSuccess: false,
      time: 5,
      timer: 0,

      userName: "",
      userNameRules,

      userNameLoad: false,

      password: "",
      passwordRulse: [
        ...passwordRulse,
        (password) =>
          this.passwordEnter === "" ||
          password === this.passwordEnter ||
          "密码输入不一致",
      ],

      passwordEnter: "",
      passwordEnterValid: [
        ...passwordRulse,
        (passwordEnter) =>
          this.password === "" ||
          passwordEnter === this.password ||
          "密码输入不一致",
      ],
    };
  },
  methods: {
    gotoHome() {
      this.$router.push("/home");
      window.location.reload();
      this.countDown.clear();
    },
    async submit() {
      const res = this.$refs.form.validate();
      if (res) {
        const formData = {
          username: this.userName,
          password: this.passwordEnter,
        };
        const { data } = await this.$axios.post(
          `/${this.radioGroup ? "doctors" : "users"}/register`,
          formData
        );
        if (data.code === 200) {
          await login(this.userName, this.password);
          this.isSuccess = true;
          this.countDown.start(5);
          await this.countDown.end();
          const that = this;
          this.$router.push({
            name: `${that.radioGroup ? "doctorInfo" : "userInfoFill"}`,
            params: {
              id: data.userInfoId,
            },
          });
        } else if (data.code == 205) {
          this.alert = true;
        }
      }
    },
  },
};
</script>



<style lang="scss" scoped>
</style>
